<template>
  <div class="header">
    <div class="header-left">
      <span class="iconfont cen_icon">&#xe622;</span>
    </div>
    <!-- 搜索按钮 &#xe611; -->
    <div class="header-center">
      <input placeholder="输入城市/景点/游玩主题" />
    </div>
    <router-link to="/city">
      <div class="header-right">{{this.city}}
        <span class="iconfont rig_icon">&#xe64a;</span>
      </div>
    </router-link>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  name: "HomeHeader",
  computed: {
    ...mapState(["city"])
    // ...mapGetters(['doubleCity'])
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/variavle.styl'
.header 
  display flex
  line-height 0.56rem
  background $bgColor
  color #fff
  .header-left 
    width 0.64rem
    float left
    .cen_icon 
      text-align center
      font-size 0.34rem
      display block
      line-height 0.86rem
  .header-center 
    flex 1
    margin-top 0.12rem
    margin-left 0.2rem
    color #666
    input 
      width 96%
      height 0.56rem
      display block
      border 1px solid #fff
      border-radius 5px
      padding-left 0.1rem
  .header-right 
    min-width 1.04rem
    padding 0 0.1rem
    float right
    text-align center
    font-size 0.3rem
    line-height 0.86rem
    color #fff
    .rig_icon 
      font-size 0.12rem
      margin-left -0.04rem
</style>